<template>
	<view class="content">
		<view class="content-bg">
			<view class="charts-box">
				<qiun-data-charts type="mix" :opts="{dataLabel:false,color:['#ff5500','#2337e9'],xAxis:{rotateLabel:true},extra:{column:{width:10,barBorderCircle:true}},yAxis:{data:[{position: 'left',min: 0,max: 100,title: '首站/尾站进度',textAlign: 'left'},{position: 'right',title: '工单总量'}]}}" :chartData="chartsData"/>
			</view>
		</view>
	</view>
</template>

<script>
	import {GetWOProgressLast3MonthsExcludingZero} from '../../common/screen-old.js'
	
	export default {
		data() {
			return {
				chartsData:{},
			};
		},
		onLoad(){
			console.log("onLoad>>>");
			this.loadData();
		},
		onNavigationBarButtonTap:function(e){
			uni.navigateTo({
				url: '/pages/workorder/schedule-detail'
			});
		},
		methods:{
			loadData(){
				GetWOProgressLast3MonthsExcludingZero().then(res=>{
					console.log(">>>",res);
					var result = JSON.parse(res);
					this.dataArray = result;
					console.log(result);
					this.setChartDataDay(result);
				});
			},
			
			selectChange(){
				this.loadData();
			},
			
			setChartDataDay(data){
				var categories = [];
				
				var szArray = [];
				var wzArray = [];
				var totalnums = [];
				data.source.forEach(item => {
					categories.push(item.product_name);
					szArray.push(item.首站进度);
					wzArray.push(item.尾站进度);
					totalnums.push(item.工单总量);
				});
				var mix = {
					"categories": categories,
					"series": [  {
						"name": "工单总量",
						"data": totalnums,
						"index":1,
						"type": "column",
						"color": "#2fc25b"
					},
					{
						"name": "首站进度",
						"data": szArray,
						"type": "line"
					}, {
						"name": "尾站进度",
						"data": wzArray,
						"type": "line"
					}]
				};
				this.chartsData = mix;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("./schedule-index.css");
</style>
